前两天去了一次 html5 分享沙龙，突然对 css3 的一些效果感兴趣起来。写了一个折纸角效果。
用到的主要是css3中旋转的属性rotate，还有强大的background中linear-gradient属性。
整个折角由两个部分组成，一个是折角体，一个是用来遮挡背景的块。
用到的主要是属性是linear-gradient，将矩形块的背景设置成以对角线分开，一边是背景色（紫色），一边是纸条的颜色。
然后利用rotate，将它旋转。
然后定位到合适位置，这样，就是一个折角了。
最后用小块把多余的背景盖住。一个折角就做好了。
这个做法的优点：用css伪类before和after生成折角，html结构中没有多余元素，干净。
缺点：在折角的上方会多出来一块，如不设置好margin-top，则会挡住其他元素，露馅。
以下是实现方法及demo，这里是源码：css3_paper_corner_effect
第一步：做一个方框，利用linear-gradient属性，将矩形块的背景设置成以对角线分开，一边是背景色（紫色），一边是纸条的颜色（黄色）。两个渐变色的起始点设置成同一点，即50%，这样就可以在二分之一处颜色突变，从而产生一条明显的分界线的效果。然后用-150deg，把这条颜色分界线旋转为对角线。这里为了方便看清方块，将边框设置了1px
第二步：利用rotate，将它旋转，并且加上阴影。
第三步：放到大的div中，调整位置。
黄色纸条
第四步：加上一个块，把多余的背景盖住
黄色纸条
OK！隐藏掉这些块的border之后就大功告成啦！
CSS3实现折角Demo
黄色纸条
绿色纸条
红色纸条
以下是相关代码
css部分：
.bg_purple{background-color:#CFCFFF;margin:15px auto;padding:20px;}
.bg_purple h1{text-align:center;}
.bg_purple .tips{width:300px;height:100px;margin:25px auto;text-align:center;line-height:100px;font-size:24px;font-weight:bold;position:relative;}
.bg_purple .conner{display:block;position:relative;}
.bg_purple .conner:after{content:"";-moz-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);background:-moz-linear-gradient(-150deg,#CFCFFF 50%,#FFFFA9 50%) repeat scroll 0 0 transparent;background:-webkit-linear-gradient(-150deg,#CFCFFF 50%,#FFFFA9 50%) repeat scroll 0 0 transparent;height:70px;width:40px;position:absolute;right:14px;top:-15px;box-shadow:-4px 4px 3px -3px #000000;}
.bg_purple .conner:before{content:"";background-color:#CFCFFF;height:40px;width:40px;position:absolute;right:0;top:0;}
.bg_purple .yellow{background-color:#FFFFA9;}
.bg_purple .yellow:after{background:-moz-linear-gradient(-150deg,#CFCFFF 50%,#FFFFA9 50%) repeat scroll 0 0 transparent;background:-webkit-linear-gradient(-150deg,#CFCFFF 50%,#FFFFA9 50%) repeat scroll 0 0 transparent;}
.bg_purple .green{background-color:#CFFFCF;}
.bg_purple .green:after{background:-moz-linear-gradient(-150deg,#CFCFFF 50%,#CFFFCF 50%) repeat scroll 0 0 transparent;background:-webkit-linear-gradient(-150deg,#CFCFFF 50%,#CFFFCF 50%) repeat scroll 0 0 transparent;}
.bg_purple .red{background-color:#FFCFCF;}
.bg_purple .red:after{background:-moz-linear-gradient(-150deg,#CFCFFF 50%,#FFCFCF 50%) repeat scroll 0 0 transparent;background:-webkit-linear-gradient(-150deg,#CFCFFF 50%,#FFCFCF 50%) repeat scroll 0 0 transparent;}
html部分十分简洁：
<div class="bg_purple" >
<h1>CSS3实现折角Demo</h1>
<div class="tips conner yellow" >黄色纸条</div>
<div class="tips conner green" >绿色纸条</div>
<div class="tips conner red" >红色纸条</div>
</div>